<template>
    <div>
        <van-nav-bar title="搜索" left-arrow @click-left="onClickLeft" />
        <van-search v-model="keyWord" shape="round" background="#31c27c" autofocus="true" placeholder="请输入搜索关键词"
            @search="onInput" />
        <div class="history">
            <div class="title">
                <h2>搜索历史</h2>
                <van-icon name="delete-o" size=".3rem"  @click="removeHisData"/>
            </div>
            <!-- 历史记录 -->
            <div class="list">
                <van-tag v-for="(item, i) in hisData" :key="i" closeable size="medium" type="primary" @close="close(i)">
                    {{ item }}</van-tag>
            </div>
            <div class="titList" v-if="searchData.length">
                <div class="item" v-for="item in searchData" :key="item.id" @click="goDetail(item)">
                    {{ item.title }}
                </div>
            </div>
            <van-empty image="search" v-if="isShow" description="暂无数据" />
        </div>
    </div>
</template>

<script>
export default {
    name: "Search",
    data() {
        return {
            keyWord: "",
            searchData: [], //服务器响应的搜索数据
            isShow: false,
            hisData: [], //搜索关键字
            timer: null,
        };
    },
    mounted() {
        this.hisData = JSON.parse(localStorage.getItem("youth_hisData") || "[]");
    },
    methods: {
        // 返回
        onClickLeft() {
            this.$router.go(-1);
        },
        // 输入框的值回车后触发
        onInput(val) {
            // 防抖
            // clearTimeout(this.timer)
            // this.timer=setTimeout(()=>{
            //     if (val) {
            //         this.getData(val);
            //     }
            //     this.searchData = [];
            // },800)

            if (val) {
                this.getData(val);
            }
            this.searchData = [];
            this.keyWord=''
        },
        // 删除指定的搜索关键字
        close(i) {
            this.hisData.splice(i, 1);
            this.setlocalStorage();
        },
        // 删除全部的搜索记录
        removeHisData(){
            localStorage.removeItem('youth_hisData')
            this.hisData=[]
            this.searchData=[] 
        },
        // 搜索信息
        async getData(keyWord) {
            this.hisData.unshift(keyWord);
            // 数组去重
            this.hisData = [...new Set(this.hisData)];
            // 将搜索关键字保存到本地存储
            this.setlocalStorage();

            try {
                const result = await this.$api.getSearchInfo(keyWord);
                if (result.status == 200) this.searchData = result.data;
                if (result.data.length < 1) {
                    this.isShow = true;
                } else {
                    this.isShow = false;
                }
            } catch (error) {
                console.log(error, message);
            }
        },
        // 将搜索关键字保存到本地存储
        setlocalStorage() {
            localStorage.setItem("youth_hisData", JSON.stringify(this.hisData));
        },
        // 跳转到详情页
        goDetail({id,classid:cid}){
            this.$router.push(`/detail?id=${id}&cid=${cid}`)
        }
    },
};
</script>

<style lang="less" scoped>
.van-nav-bar__title {
    line-height: 1rem !important;
}

.history {
    padding: 0 0.3rem;
    padding-bottom: 0.3rem;
    transition:all .5s;
    .title {
        display: flex;
        font-size: 0.25rem;
        color: #555;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.3rem;
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        padding-top: 0.2rem;
        .van-tag {
            margin-right: 0.2rem;
            margin-bottom: 0.1rem;
            font-size: 0.25rem;
        }
    }

    .titList {
        margin-top: 0.3rem;
        padding: 0.2rem;
        border-radius: 0.2rem;
        background: #fafafa;

        .item {
            font-size: 0.32rem;
            padding: 0.15rem 0;
            padding-left: 0.25rem;
            position: relative;
            display: block;
            color: #333;
            &::before {
                content: "";
                height: 0.08rem;
                width: 0.08rem;
                background: #31c27c;
                position: absolute;
                border-radius: 100%;
                left: 0;
                top: calc(50% - 0.04rem);
                box-shadow: 0 0 0.1rem #31c27c;
            }
        }
    }
}

.van-empty {
    margin-top: 2rem !important;
}

.van-tag--medium {
    padding: 0.1rem !important;
    background: #31c27c;
}
</style>